﻿// CustomCheckBox.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: root
    width: contentLayout.width
    height: contentLayout.height
    
    // 暴露属性
    property bool checked: false
    property string text: ""
    property color textColor: "#FFFFFF"
    property color checkedColor: "#2196F3"
    property color uncheckedColor: "#757575"
    property int spacing: 8
    property int boxSize: 20
    property alias font: label.font
    
    // 图标自定义
    property url checkedIcon: "qrc:/qt/qml/qtquickapplicationnew/icon/fy_checkbox_click.svg"
    property url uncheckedIcon: "qrc:/qt/qml/qtquickapplicationnew/icon/fy_checkbox.svg"
    
    signal clicked()
    
    // 布局结构
    RowLayout {
        id: contentLayout
        spacing: root.spacing
        
        // 选择框
        Rectangle {
            id: checkBox
            width: root.boxSize
            height: root.boxSize
            radius: 3
            color: root.checked ? root.checkedColor : root.uncheckedColor
            border.color: Qt.darker(color, 1.2)
            
            Image {
                anchors.centerIn: parent
                sourceSize: Qt.size(parent.width*0.8, parent.height*0.8)
                source: root.checked ? root.checkedIcon : root.uncheckedIcon
                visible: root.checkedIcon.toString() !== ""
            }
        }
        
        // 文本标签
        Text {
            id: label
            text: root.text
            color: root.textColor
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.Wrap
            Layout.fillWidth: true
        }
    }
    
    // 点击区域
    MouseArea {
        anchors.fill: contentLayout
        onClicked: {
            root.checked = !root.checked
            root.clicked()
        }
    }
    
    // 点击动画
    Behavior on checked {
        PropertyAnimation { duration: 200 }
    }
}